<template>
    <div>
        <button @click="isShow = !isShow" :style="{color:'red','margin-top':'10px'}"> 显示||隐藏 </button>
        <!-- vue中用transition包裹就会执行相应的动画效果(会自动的帮你把动画的类名加上去) -->
          <!-- appear表示立即执行动画(页面加载完成立即执行) -->
        <transition name = 'text' :appear="true" >
            <h1 v-show="isShow" class="text">快看我</h1>
        </transition>
    </div>
</template>

<script>
export default {
    components: {  },
    data() {
        return {
            isShow:true
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style lang="less" scoped>
.text{
    width: 100%;
    height: 68px;
    line-height: 68px;
    background-color: salmon;
}
// vue 中进入时的动画
.text-enter-active{
    animation:animation 1s;
}
// vue 中离开时的动画 .v-leave-active(这是当你的transition元素没有name时就取得这个类名里的动画效果)
// .text-leave-active  是transition的name-leave-active
.text-leave-active{
    // 反转动画
    animation: animation 1s reverse;
}
@keyframes animation {
    from{
        transform: translateX(-100%);
    }
    to{
        transform: translateX(100%);
    }
}
</style>